<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="../js/global.js"></script>
	</head>
	<body>
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
			<legend>题库</legend>
		</fieldset>
		
		<div id="searchePage" class="layui-form-item" style="margin-top: 10px;margin-left: 10px;">
			<form class="layui-form" method="post" onsubmit="return false;">
				<label class="layui-form-mid">题目:</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" id="questionContent" name="questionContent" autocomplete="off"
						class="layui-input" />
				</div>
				<label class="layui-form-mid">类型:</label>
				<div class="layui-input-inline" style="width: 100px;">
					<select class="qu" id="questionTypeId" name="questionTypeId">
							<option></option>
						</select>
				</div>
				<label class="layui-form-mid">出题起止时间:</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" name="beginDate" id="beginDate" placeholder="yyyy-MM-dd"
						autocomplete="off" class="layui-input" />
				</div>
				<label class="layui-form-mid">--</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" name="endDate" id="endDate" placeholder="yyyy-MM-dd"
						autocomplete="off" class="layui-input" />
				</div>
                <div class="layui-input-inline" style="width: 70px;">
					<button class="layui-btn" id="search" data-type="reload">搜索</button>
				</div>
				<div class="layui-input-inline">
					<button class="layui-btn" lay-event="createClass" id="addPage">添加</button>
				</div>
			</form>
		</div>
		<!--
			编辑弹层
		-->
		
		<div id="updatePage" style="display: none;">
			<form class="layui-form" action="" onsubmit="return false" lay-filter="updateForm">
				
				<div class="layui-form-item" style="margin-top: 30px;">
					<label class="layui-form-label"><span style="color: red;">*</span>类型:</label>
					<input type="hidden" name="questionId" />
					<div class="layui-input-inline" style="width: 350px;">
						<select class="qu" name="questionTypeId">
							<option></option>
						</select>
					</div>
				</div>
			<div class="layui-form-item" >
				<label class="layui-form-label"><span style="color: red;">*</span>出题者:</label>
				<div class="layui-input-inline" style="width: 350px;">
					
					<input type="type" name="questionCreater"
						 class="layui-input" />
				</div>
			</div>
			<div class="layui-form-item" >
				<label class="layui-form-label"><span style="color: red;">*</span>试题:</label>
				<div class="layui-input-inline" style="width: 350px;">
					
					<input type="text" name="questionContent"
						 class="layui-input" />
				</div>
			</div>
			<div class="layui-form-item" >
				<label class="layui-form-label"><span style="color: red;">*</span>分值:</label>
				<div class="layui-input-inline" style="width: 350px;">
					
					<input type="number" name="questionScore"
						lay-verify="number" class="layui-input" />
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red;">*</span>选项A:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" name="itemA"
						 class="layui-input" />
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red;">*</span>选项B:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" name="itemB"
						 class="layui-input" />
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red;">*</span>选项C:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" name="itemC"
						 class="layui-input" />
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red;">*</span>选项D:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" name="itemD"
						 class="layui-input" />
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red;">*</span>答案:</label>
				<div class="layui-input-inline" style="width: 350px;">
					<input type="text" name="questionAnswer"
						 class="layui-input" />
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label"><span style="color: red;">*</span>答案:</label>
				<div class="layui-input-inline" style="width: 350px;">
			 <textarea  name="questionAnalysis" type="text"  class="layui-textarea" ></textarea>
				</div>
			</div>
			<div class="layui-btn-container" style="text-align: center;">
				<button class="layui-btn" lay-submit="" lay-filter="updateQuestion">保存</button>
			</div>
			</form>
		</div>
		<!-- 详情区-->
		<!-- <div id="detailPage" style="display: none;"> -->
			<div class="list" id="detailPage" style="display: none;">
				<form class="layui-form" action="" onsubmit="return false" lay-filter="detailForm">
					
					<div class="layui-form-item" style="margin-top: 30px;">
						<label class="layui-form-label"><span style="color: red;">*</span>类型:</label>
						<div class="layui-input-inline" style="width: 350px;">
							<select disabled="" class="qu" name="questionTypeId">
								<option></option>
							</select>
						</div>
					</div>
				<div class="layui-form-item" >
					<label class="layui-form-label"><span style="color: red;">*</span>出题者:</label>
					<div class="layui-input-inline" style="width: 350px;">
						
						<input type="type" name="questionCreater"
							lay-verify="number" class="layui-input" disabled/>
					</div>
				</div>
				<div class="layui-form-item" >
					<label class="layui-form-label"><span style="color: red;">*</span>试题:</label>
					<div class="layui-input-inline" style="width: 350px;">
						
						<input type="text" name="questionContent"
							lay-verify="uname" class="layui-input" disabled/>
					</div>
				</div>
				<div class="layui-form-item" >
					<label class="layui-form-label"><span style="color: red;">*</span>出题者:</label>
					<div class="layui-input-inline" style="width: 350px;">
						
						<input type="type" name="questionCreater"
							lay-verify="number" class="layui-input" disabled/>
					</div>
				</div>
				<div class="layui-form-item" >
					<label class="layui-form-label"><span style="color: red;">*</span>分值:</label>
					<div class="layui-input-inline" style="width: 350px;">
						
						<input type="number" name="questionScore"
							lay-verify="number" class="layui-input" disabled/>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>选项A:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" name="itemA"
							lay-verify="uname" class="layui-input" disabled/>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>选项B:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" name="itemB"
							lay-verify="uname" class="layui-input" disabled/>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>选项C:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" name="itemC"
							lay-verify="uname" class="layui-input" disabled/>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>选项D:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" name="itemD"
							lay-verify="uname" class="layui-input" disabled/>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>答案:</label>
					<div class="layui-input-inline" style="width: 350px;">
						<input type="text" name="questionAnswer"
							lay-verify="uname" class="layui-input" disabled/>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><span style="color: red;">*</span>答案:</label>
					<div class="layui-input-inline" style="width: 350px;">
				 <textarea disabled name="questionAnalysis" type="text" lay-verify="uname" class="layui-textarea" ></textarea>
					</div>
				</div>
				
				</form>
		 </div> 
		<!--
        	数据表格
        -->
	
    <table class="layui-hide" id="qu_table" lay-filter="qu_table">
		
	</table>
   <!--行内工具栏-->
   <script type="text/html" id="barDemo">
	<a class="layui-btn layui-btn-xs" lay-event="detail">详情</a>
   	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
   	<a class="layui-btn layui-btn-xs" lay-event="update">编辑</a>
   </script>
  
  
		
        
</body>
	<script>
		
			layui.use(['table', 'form', 'layer', 'laydate', 'upload', 'element'],function(){
				var layer = layui.layer;
				var form = layui.form;
				var table = layui.table;
				var laydate = layui.laydate;
				var upload = layui.upload;
				var element = layui.element;
				var $ = layui.$;
				
				//渲染院系表
				$.get(globalData.examinationServer + '/questionType/listQuestionTypes', function(res) {
					var html = "";
					for (var i = 0; i < res.data.length; i++) {
						html += "<option  value=" + res.data[i].questionTypeId + ">" + res.data[i].questionTypeName + "</option>"
				
					}
					$(".qu").append(html);
				
					form.render('select')
				}, "json")
				var quanju = new Array();//全局
				var huancun = new Array();//缓存
				table.render({
					elem:'#qu_table',
					height:400,
					url:globalData.examinationServer+'/question/listQuestions',
					method:"get",
					toolbar: '#bart',
					//headers: {token: globalData.getCurToken()},//设置请求头
					title:"用户表",
					page:true,
					cols:[
							[{
							type: 'checkbox'


						},
							{
								field:'questionContent',
								title:'题目内容',
								sort:true,
								align:'center'
							},{
								field:'questionCreater',
								title:'出题者',
								sort:true,
								align:'center'
							},{
								field: 'questionScore',
								title: '题目分数',
								sort:true,
								align:'center'
							},{
								field: 'questionTypeId',
								title: '题目类型',
								templet:'<div>{{questionType(d.questionTypeId)}}</div>'
							},{
								field: 'questionAnswer',
								title: '正确答案',
								sort:true,
								align:'center'
							},{
								field:'questionAnalysis',
								title:'题目解析'
								},{
								field:'questionAnswer',
								title:'正确答案'
								}
							]
						],
						id:"testReload",
						done:function(res,curr,count){
                     //数据表格加载完成时调用此函数
                //如果是异步请求数据方式，res即为你接口返回的信息。
                    //设置全部数据到全局变量
                    quanju=res.data;
 
                    //在缓存中找到id ,然后设置data表格中的选中状态
                    //循环所有数据，找出对应关系，设置checkbox选中状态
                    for(var i=0;i< res.data.length;i++){
                        for (var j = 0; j < huancun.length; j++) {
                            //数据id和要勾选的id相同时checkbox选中
                            if(res.data[i].questionId == huancun[j])
                            {
                                //这里才是真正的有效勾选
                                res.data[i]["LAY_CHECKED"]='true';
                                //找到对应数据改变勾选样式，呈现出选中效果
                                var index= res.data[i]['LAY_TABLE_INDEX'];
                                $('.layui-table tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
                                $('.layui-table tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
                            }
                        }
                    }
                    //设置全选checkbox的选中状态，只有改变LAY_CHECKED的值， table.checkStatus才能抓取到选中的状态
                  	//设置全选checkbox的选中状态，只有改变LAY_CHECKED的值， table.checkStatus才能抓取到选中的状态
					var checkStatus = table.checkStatus('testReload');//这里的studentTable是指分页中的id
                    if(checkStatus.isAll){//是否全选
                        //layTableAllChoose
                     $('.layui-table th[data-field="0"] input[type="checkbox"]').prop('checked', true);//data-field值默认为0，如果在分页部分自定义了属性名，则需要改成对应的属性名
                     $('.layui-table th[data-field="0"] input[type="checkbox"]').next().addClass('layui-form-checked');//data-field值默认为0，如果在分页部分自定义了属性名，则需要改成对应的属性名
                    }
			}
						
					});
						
						//添加班级弹出层
						$("#addPage").on('click',function(){
							layer.open({
								type:2,
								title:'添加试题',
								area: ['500px', '600px'],
								content:'question_add.html',
								end:function(){
									//alert(1)
								}
							});
						});
				
				
				active={
					reload:function(){
						var questionContent=$("#questionContent");
						var questionTypeId=$("#questionTypeId");
						var beginDate=$("#beginDate");
						var endDate=$("#endDate");
						table.reload('testReload',{
							where:{
								'questionContent':questionContent.val(),
								'questionTypeId':questionTypeId.val(),
								'beginDate':beginDate.val(),
								'endDate':endDate.val()
								},
							curr:{
								page:1
							}
						});
					}
				};
				
				//查询操作
				$("#search").on('click',function(){
					var type=$(this).data('type');
					active[type]?active[type].call(this):'';
				})
				
					
				        //复选框选中监听,将选中的id 设置到缓存数组,或者删除缓存数组
				        //这里的checkbox(XXX)为HTML代码中table的id
				        table.on('checkbox(qu_table)', function (obj) {
				           if(obj.checked==true){
				               if(obj.type=='one'){
				                   huancun.push(obj.data.questionId);
				              }else{
				                   for(var i=0;i<quanju.length;i++){
				                       huancun.push(quanju[i].questionId);
				                   }
				               }
				           }else{
				               if(obj.type=='one'){
				                   for(var i=0;i<huancun.length;i++){
				                      if(huancun[i]==obj.data.questionId){
				            			  removeByValue(huancun,huancun[i]);//调用自定义的根据值移除函数
				                       }
				                  }
				               }else{
				                   for(var i=0;i<huancun.length;i++){
				                       for(var j=0;j<quanju.length;j++){
				                           if(huancun[i]==quanju[j].questionId){
				                        	   removeByValue(huancun,+huancun[i]);//调用自定义的根据值移除函数
				                          }
				                       }
				                   }
				               }
				           }
						  globalData.setIds(huancun);
				        });
		           //自定义方法，根据值去移除
		        		 function removeByValue(arr, val) {
		        			for(var i = 0; i < arr.length; i++) {
		        			    if(arr[i] == val) {
		        					arr.splice(i, 1);
		        					break;
		        			    }
		        			}
		        		}
		        	

				
//			
	          //行内工具栏监听
				table.on('tool(qu_table)',function(obj){
					var data=obj.data;
					switch(obj.event){
						case 'del':{
						layer.confirm('确认删除该试题的信息吗?',{icon:7},function(index){
							layer.close(index);
						   $.ajax({
								type : "delete",
								url : globalData.examinationServer+'/question/deleteQuestion',
								data:{
											questionId:data.questionId
										},//需要传递到服务端的数据
										dataType:'json',//服务端响应数据类型
										xhrFields: {
											withCredentials: true
										},
										// beforeSend: function(request) {
										// 	request.setRequestHeader("token", globalData.getCurToken());
										// },
										success : function(res) {
											if(res.code == 0){
												layer.msg(res.msg,{icon:1,time:2000},function(index){
													table.reload('testReload');
												});
												
											}else{
												layer.msg(res.msg,{icon:2,time:2000});
											}
									}
									});
									
								});
								}
						break;
						case 'update':
						//表单赋值
						form.val('updateForm',data);
						var update_index=layer.open({
							type:1,
							title:'您正在修改试题的信息',
							area: ['500px', '500px'],
							content: $('#updatePage'),
							success:function(layero,index){
								//修改提交
								form.on('submit(updateQuestion)',function(obj){
									//console.log(obj.field);
									$.ajax({
										type : "put",
										url : globalData.examinationServer+'/question/updateQuestion',
										data:obj.field,//需要传递到服务端的数据
										dataType:'json',//服务端响应数据类型
										xhrFields: {
											withCredentials: true
										},
										// beforeSend: function(request) {
										// 	request.setRequestHeader("token", globalData.getCurToken());
										// },
										success : function(res) {
											if(res.code == 0){
												layer.msg(res.msg,{icon:1,time:2000},function(index){
													layer.close(update_index);
													table.reload('testReload');
												});
												
											}else{
												layer.msg(res.msg,{icon:2,time:2000});
											}
									}
									});
								});
							}
						});
						
							break;
							//详情
							case 'detail':
							//表单赋值
							form.val('detailForm',data);
								var detaile_index=layer.open({
								type:1,
								//title:'您正在修改本题的信息',
								area: ['600px', '600px'],
								content: $('#detailPage'),
								success:function(layero,index){
								//修改提交
	
								}
							});
						
							break;
							
							
						
					}
				});

			});
			
			
			//应用template模板，渲染专业
			    function questionType(questionTypeId){
					var qId = questionTypeId;
			        var title;
			        $.ajax({
			            url:globalData.examinationServer+ '/questionType/listQuestionTypes',//你的后台请求路径
			            dataType:'json',
			            async: false,//同步
			            success:function(data){
							$.each(data.data,function (index,obj) {
								//console.log("q"+qId);
								//console.log(data.data);
								//console.log(obj.questionTypeId==qId);
									 if(obj.questionTypeId==qId){
										title=obj.questionTypeName;
			                             
			                        }
			                    });
			            }
			        });
			        return title;
			    };

			
		</script>
		
</html>
